<template>
  <div class="root">
    <div class="rong">
        <div class="peizhi">定位配置</div>
        <div class="inp">
            <div>
                <span>用户端</span><input placeholder="" v-model="positionuser"/>
                <!-- <button v-if="positionuser.length > 0" class="yipeizhi">已配置</button> -->
                <button :style="{ backgroundColor: buttonColor }" @click="peizhiuser">{{ ispeizhi ? '已配置' : '配置' }}</button>
            </div>
            <div>
                <span>司机端</span><input placeholder="" v-model="positionsj"/>
                <button :style="{ backgroundColor: buttonColorsj }" @click="peizhisj">{{ ispeizhisj ? '已配置' : '配置' }}</button>
            </div>
        </div>
        <div class="peizhis">导航配置</div>
        <div class="inps">
            <div>
                <span>用户端</span><input placeholder="" v-model="feiuser"/>
                <button :style="{ backgroundColor: buttonColorfeiuser }" @click="feiusers">{{ isfeiuser ? '已配置' : '配置' }}</button>
            </div>
            <div>
                <span>司机端</span><input placeholder="" v-model="feisj"/>
                <button :style="{ backgroundColor: buttonColorfeisj }" @click="feisjs">{{ isfeisj ? '已配置' : '配置' }}</button>
            </div>
        </div>
        <div class="peizhi">导航提示音配置</div>
        <div class="inp">
            <div class="bot">
                <span>司机端</span><input placeholder="" v-model="yin"/>
                <button :style="{ backgroundColor: buttonColoryin }" @click="yins">{{ isyin ? '已配置' : '配置' }}</button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            //1---定位配置-用户端，2---定位配置--司机端 3---导航配置-用户端 4---导航配置--司机端  5---导航提示音配置-司机端
            ispeizhi:false,
            positionuser:'',
            //定位配置-司机端
            ispeizhisj:false,
            positionsj:'',
            //导航配置--用户端
            isfeiuser:false,
            feiuser:'',
            isfeisj:false,
            feisj:'',
            //提示音配置
            isyin:false,
            yin:'',
            buttonColor: 'rgb(22,155,231)', // 默认颜色
            buttonColorsj: 'rgb(22,155,231)', // 默认颜色
            buttonColorfeiuser: 'rgb(22,155,231)',
            buttonColorfeisj: 'rgb(22,155,231)',
            buttonColoryin: 'rgb(22,155,231)',
            
        }
    },
    methods:{
        peizhiuser(){
            //原始的
            if(this.positionuser.length > 0) {
                this.ispeizhi = true
                this.buttonColor = 'rgb(0,188,140)'
            }else{
                if(!this.ispeizhi){
                    alert('用户端配置内容不能为空')
                }
            }
        },
        peizhisj(){
            //原始的
            if(this.positionsj.length > 0) {
                this.ispeizhisj = true
                this.buttonColorsj = 'rgb(0,188,140)'
            }else{
                if(!this.ispeizhisj){
                    alert('司机端配置内容不能为空')
                }
            }
        },
        feiusers(){
            //原始的
            if(this.feiuser.length > 0) {
                this.isfeiuser = true
                this.buttonColorfeiuser = 'rgb(0,188,140)'
            }else{
                if(!this.isfeiuser){
                    alert('用户端配置内容不能为空')
                }
            }
        },
        feisjs(){
            //原始的
            if(this.feisj.length > 0) {
                this.isfeisj = true
                this.buttonColorfeisj = 'rgb(0,188,140)'
            }else{
                if(!this.isfeisj){
                    alert('司机端配置内容不能为空')
                }
            }
        },
        yins(){
            //原始的
            if (this.yin.length > 0) {
                this.isyin = true
                this.buttonColoryin = 'rgb(0,188,140)'
            }else{
                if(!this.isyin){
                    alert('提示音配置内容不能为空')
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
     .root{
        width:100vi;
        height: 70vh;
        background-color: whitesmoke;
        padding: 15px 0 20px 30px;
        .rong{
            width: 87%;
            // background-color: skyblue;
            height: 150px;
            .peizhi{
                font-size: 19px;
                font-weight: bold;
                margin-left: -6px;
                margin-bottom: 12px;
            }
            .peizhis{
                font-size: 19px;
                font-weight: bold;
                margin-left: -6px;
                margin-top: 50px;
                margin-bottom: 12px;
            }
            .inp{
                margin-top: 7px;
                // background-color: slateblue;
                display: flex;
                flex-direction: column;
                .bot{
                     margin-top: 100px;
                }
                div{
                    // background-color: salmon;
                    height: 43px;
                    display: flex;
                    align-items: center;
                    input{
                        width: 88%;
                        height: 43px;
                        margin-left: 5px;
                        border:1px solid rgb(200,200,200)
                    }
                    &:last-child{
                        margin-top: 20px;
                    }
                    button{
                        width: 90px;
                        height:43px;
                        margin-left: 8px;
                        border-radius: 5px;
                        color: white;
                        border: none;
                    }
                }
            }
            .inps{
                margin: 0 0 50px 0;
                // background-color: slateblue;
                display: flex;
                flex-direction: column;
                div{
                    // background-color: salmon;
                    height: 43px;
                    display: flex;
                    align-items: center;
                    input{
                        width: 88%;
                        height: 43px;
                        margin-left: 5px;
                        border:1px solid rgb(200,200,200)
                    }
                    &:last-child{
                        margin-top: 20px;
                    }
                    button{
                        width: 90px;
                        height:43px;
                        margin-left: 8px;
                        border-radius: 5px;
                        color: white;
                        border: none;
                    }
                }
            }
            
            .weipeizhi{
                background-color: rgb(22,155,231);
                border: none;
                border-radius: 4px;
                color: white;
            }
            .yipeizhi{
                background-color: rgb(0,188,140);
                border: none;
                border-radius: 4px;
                color: white;
            }
        }
     }
    
</style>